<template>
  <div class="uploadImgContainer">
    <el-upload
      class="avatar-uploader"
      action="/uhome-file-system/api/pc/upload/uploadImage"
      accept=".png,.jpeg,.jpg,.pdf"
      :limit="1"
      list-type="picture-card"
      :file-list="fileList"
      :auto-upload="true"
      :on-change="handleAvatarChange"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePictureCardPreview"
    >
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>

          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import Const from "@/api/Const.js";
export default {
  props: {
    certificateId: {
      type: String,
      default: ""
    },
    typeTxt: {
      type: String,
      default: ""
    },
    updateImgUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      imageUrl: "",
      fileNameType: ["image/png", "image/jpeg", "application/pdf"],
      //fileNameType: ["image/png", "image/jpeg"],
      fileTxt: [".png", ".jpeg", ".jpg", ".pdf"],
      fileSize: 1024 * 1024 * 2,
      dialogVisible: false,
      dialogImageUrl: "",
      fileList: [],
      $doc: "",
      $itemUpload: ""
    };
  },

  mounted() {
    let doc = document.getElementsByClassName("el-upload--picture-card")[0];
    let itemUpload = document.getElementsByClassName("el-upload-list__item")[0];
    this.$doc = doc;
    this.$itemUpload = itemUpload;
    this.loadingImgHandle();
  },
  watch: {
    updateImgUrl: {
      handler(newValue, oldVale) {
        if (newValue) {
          this.loadingImgHandle();
        }
      }
    }
  },
  methods: {
    loadingImgHandle() {
      if (this.updateImgUrl) {
        let url = JSON.parse(JSON.stringify(this.updateImgUrl));
        this.$doc.style = "display:none";
        this.fileList.push({
          uid: new Date().getTime(),
          url: this.$baseImgUrl + url
        });
        this.imageUrl = this.updateImgUrl;
        this.getCoverImgPath(url);
        this.$emit("getUploadData", {
          img: this.updateImgUrl
        });
      }
    },
    reset() {
      this.$doc.style = "display:block";
      this.fileList = [];
    },
    handleAvatarChange(file) {
      this.$doc.style = "display:none";
      if (file.raw.type == "application/pdf") {
        file.url = "static/images/logo.png";
      }
    },
    handleAvatarSuccess(response, file, resss) {
      if (response) {
        this.imageUrl = response;
        this.getCoverImgPath(response);
        this.isShowFlag = true;
      }
    },
    handleRemove(file) {
      this.fileList.splice(0, 1);
      this.$doc.style = "display:block";
      this.$doc.$itemUpload = "transition:none";
      this.$emit("getUploadData", {});
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getCoverImgPath(url) {
      var that = this;
      this.$emit("changeLoadingTrue");
      this.$axios
        .get(Const.api.getDetails, {
          params: {
            url: url,
            certificateId: this.certificateId
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            let info = JSON.parse(res.data.data);
            this.$emit("getUploadData", {
              info: info.items,
              img: this.imageUrl
            });
            this.$emit("changeLoadingFlase");
          } else {
            // that.$message({
            //   message: "上传证书类型不匹配！",
            //   type: "warm"
            // });
            this.$emit("getUploadData", {
              img: this.imageUrl
            });
            this.$emit("changeLoadingFlase");
          }
        });
    },
    beforeAvatarUpload(file) {
      let { type, size } = file;
      if (this.fileNameType.includes(type)) {
        // 包含
        if (size > this.fileSize) {
          this.$message.error(`请上传文件大小不能超过2M！`);
          this.$doc.style = "display:block";
          return false;
        } else {
          return true;
        }
      } else {
        this.$message.error(`请上传${this.fileTxt.join()}格式的文件！`);
        return false;
      }
    }
  },
  beforeDestroy() {
    this.fileList = [];
  }
};
</script>

<style lang="scss">
.uploadImgContainer {
  .el-upload {
    width: 400px;
    height: 290px;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 400px;
      height: 290px;
      line-height: 290px;
      text-align: center;
    }
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .el-upload-list__item,
  .is-success {
    width: 400px;
    height: 290px;
  }
}
</style>
